<template>
  <Crumbs :title="'Checkout List'" />

  <!-- table -->
  <el-row>
    <el-col :span="16">
      <el-card shadow="hover" class="box-card">
        <CheckoutList :query="data.query" />
      </el-card>
    </el-col>
    <el-col class="or-col" :span="8">
      <CardLeft />
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import Crumbs from "@/components/Crumbs/index.vue";
import CardLeft from "@/components/CardLeft/index.vue";
import CheckoutList from "../CheckoutList/index.vue";
import { reactive } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
console.log(route.query);

let data = reactive({
  query: route.query,
});
</script>
<style lang="scss" scoped>
.or-col {
  padding-left: 30px;
}
::v-deep .el-card__body {
  padding: 0px;
  .card-left {
    padding: 20px;
  }
}
</style>
